<template>
    <div class="login-wrap">
        <div class="main">
            <div class="title">招财猫支付</div>
            <div class="form">
                <el-form :model="ruleForm" :rules="rules" autoComplete="off" ref="ruleForm" label-position="left">
                    <div class="form-item">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-kttx"></use>
                        </svg>
                        <el-form-item prop="userName">
                            <el-input v-model.trim="ruleForm.userName" placeholder="请输入账号" autoComplete="off"></el-input>
                        </el-form-item>
                    </div>
                    <div class="form-item">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-mm"></use>
                        </svg>
                        <el-form-item prop="password">
                            <el-input type="password" placeholder="请输入密码" v-model.trim="ruleForm.password" @keyup.enter.native="logIn('ruleForm')" autoComplete="off"></el-input>
                        </el-form-item>
                    </div>
                    <div class="login-btn" style="text-align:right;">
                        <el-button type="primary" @click="logIn('ruleForm')">登录</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import * as API from "../http/api";
// 引入md5加密
import md5 from "js-md5";

export default {
	data: function() {
		return {
			keepPass: false, //是否记住密码
			ruleForm: {
				userName: "",
				password: ""
			},
			rules: {
				//校验规则
				userName: [
					{ required: true, message: "请输入账号", trigger: "blur" }
				],
				password: [
					{ required: true, message: "请输入密码", trigger: "blur" }
				]
			}
		};
	},
	created() {
		let num = md5("123456");
	},
	mounted() {},
	methods: {
		//提交登录
		logIn(formName) {
            const self = this;
            self.$router.push("/home");
		
		}
	}
};
</script>

<style lang="scss">
.login-wrap {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	.main {
		position: static;
		z-index: 10;
		padding: 20px 10px 40px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 12px;
		.title {
			font-size: 30px;
			text-align: center;
			color: #fff;
		}
		.form {
			width: 320px;
			margin-top: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8px;
			.form-item {
				display: flex;
				align-items: center;
				margin-bottom: 22px;
				.el-form-item {
					margin-bottom: 0;
				}
				.icon {
					width: 18px;
					height: 18px;
					margin-right: 10px;
					color: #fff;
				}
			}
			.login-btn {
				margin-top: 40px;
				button {
					width: 100%;
				}
			}
		}
	}
}
</style>
